<html>
<head>
    <title>WebSocket demo</title>
</head>
<body>

    <div>
        <form action>
            <label for="patientfield">Patient ID</label>
            <input type="text" id="patientfield" placeholder="12"/><br />
            <button type="button" id="sendBtn">Send</button>
        </form>
    </div>
    <div id="container"></div>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var ws;
            if (window.WebSocket === undefined) {
                $("#container").append("Your browser does not support WebSockets");
                return;
            } else {
                ws = initWS();
            }
            function initWS() {
                var socket = new WebSocket("ws://localhost:3000/remoteWS"),
                    container = $("#container")
                socket.onopen = function() {
                    container.append("<p>talking to MedRec server</p>");
                };
                socket.onmessage = function (e) {
                    container.append("<p> Recent record for patient with ID " + e.data + "</p>");
                }
                socket.onclose = function () {
                    container.append("<p>Socket closed</p>");
                }
                return socket;
            }
            $("#sendBtn").click(function (e) {
                e.preventDefault();
                ws.send(JSON.stringify({ patientID: parseInt($("#patientfield").val()) }));
            });
        });
    </script>
</body>
</html>
